<template>
  <el-table
      :data="menuData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      v-loading="loading"
  >
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="code" label="权限值">
      <template #default="scope">
        <span>{{ scope.row.code ? scope.row.code:'——' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="updateTime" label="修改时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="text" size="small" v-show="scope.row.level !== 4" @click="handleClickAdd(scope.row)">{{ scope.row.level === 3 ? '添加按钮':`添加【${scope.row.level}】级菜单` }}</el-button>
        <el-button type="text" size="small" v-show="scope.row.level !== 1" @click="handleClickEdit(scope.row)">编辑</el-button>
        <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
          <template #reference>
            <el-button type="text" size="small" v-show="scope.row.level !== 1">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <!-- 添加、修改的对话框 -->
  <el-dialog v-model="addDialogFormVisible" :title="addOrUpdateFlag?'新增':'修改'" width="500" :show-close="false">
    <el-form ref="addFormRef" :model="addForm" label-width="80px" :rules="rules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="addForm.name" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="权限值" prop="code">
        <el-input v-model="addForm.code" placeholder="请输入权限值"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave" v-show="addOrUpdateFlag" v-loading="addLoading">确定</el-button>
        <el-button type="primary" @click="handleUpdate" v-show="!addOrUpdateFlag" v-loading="addLoading">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from "vue"
import {getMenu, addMenu, updateMenu, deleteMenu} from "@/api/auth/menu/index.js";
import {ElMessage} from "element-plus";

export default defineComponent({
  name: "menuMan",
  setup() {
    const menuData = ref([])
    const addDialogFormVisible = ref(false)
    let loading = ref(false)
    let addFormRef = ref()
    let addOrUpdateFlag = ref(true)
    let addLoading = ref(false)
    const addForm = reactive({
      name: '',
      code: '',
      id: 0,
      level: 0
    })
    // 规则
    const rules = reactive({
      name: [{ required: true, message: '必填', trigger: 'blur' }],
      code: [{ required: true, message: '必填', trigger: 'blur' }]
    })
    onMounted(() => {
      get_menu() // 获取菜单
    })
    const get_menu = async () => {
      loading.value = true
      const res = await getMenu()
      if(res.code === 200) {
        menuData.value = res.data
        loading.value = false
      }
    }

    const handleClickAdd = (row) => {
      addDialogFormVisible.value = true // 显示对话框
      addOrUpdateFlag.value = true
      addForm.id = row.id
      addForm.level = row.level
      addFormRef.value ? addFormRef.value.resetFields():'' // 重置表单
    }

    const handleClickEdit = (row) => {
      addDialogFormVisible.value = true // 显示对话框
      addOrUpdateFlag.value = false
      addForm.name = row.name
      addForm.code = row.code
      addForm.id = row.id
    }

    const handleSave = () => {
      addFormRef.value.validate((valid) => {
        if(valid) {
          addLoading.value = true
          addMenu({
            name: addForm.name,
            code: addForm.code,
            level: addForm.level + 1,
            pid: addForm.id
          }).then(((res) => {
            addDialogFormVisible.value = false // 关闭弹窗
            if(res.code === 200) {
              ElMessage({
                message: "新增成功",
                type: "success"
              })
            } else {
              ElMessage({
                message: "新增失败",
                type: "error"
              })
            }
            addLoading.value = false
            get_menu()
          }))
        }
      })
    }

    const handleUpdate = () => {
      addFormRef.value.validate((valid) => {
        if(valid) {
          addLoading.value = true
          updateMenu({
            name: addForm.name,
            code: addForm.code,
            id: addForm.id
          }).then(((res) => {
            addDialogFormVisible.value = false // 关闭弹窗
            if(res.code === 200) {
              ElMessage({
                message: "修改成功",
                type: "success"
              })
            } else {
              ElMessage({
                message: "修改失败",
                type: "error"
              })
            }
            addLoading.value = false
            get_menu()
          }))
        }
      })
    }

    const handleDelete = (id) => {
      deleteMenu(id).then((res) => {
        if(res.code === 200) {
          ElMessage({
            message: "删除成功",
            type: "success"
          })
        } else {
          ElMessage({
            message: "删除失败",
            type: "error"
          })
        }
        get_menu()
      })
    }

    return {
      menuData,
      getMenu,
      addDialogFormVisible,
      addForm,
      handleClickAdd,
      handleClickEdit,
      rules,
      handleSave,
      addFormRef,
      loading,
      handleUpdate,
      addOrUpdateFlag,
      addLoading,
      handleDelete
    }
  },
})
</script>

<style scoped lang="scss">

</style>
